<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>富文本</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="内容" name="1"><tinymce  v-model="data.content" :height="300" :width="480" /></el-collapse-item>
        <el-collapse-item title="内容样式" name="2">
          <el-form size="medium" label-width="100px">
            <el-form-item label="背景颜色"><ColorPicker :color="data" :name="'bg_color'"></ColorPicker></el-form-item>

            <el-form-item label="内部间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_i"></el-slider>
                <el-input-number v-model="data.p_i" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_t"></el-slider>
                <el-input-number v-model="data.p_t" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_b"></el-slider>
                <el-input-number v-model="data.p_b" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_lr"></el-slider>
                <el-input-number v-model="data.p_lr" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="上边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.r_t"></el-slider>
                <el-input-number v-model="data.r_t" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.r_b"></el-slider>
                <el-input-number v-model="data.r_b" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import Tinymce from '@/components/Tinymce';
import ColorPicker from '@/components/ColorPicker/index';
import {decodeUnicode,encodeUnicode} from '@/utils/index.js'
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  components: {
    Tinymce,
    ColorPicker
  },
  watch: {
    content() {
      console.log(JSON.stringify(this.content))
      this.$set(this.data, 'content',this.content)
    }
  },
  data() {
    return {
      activeNames: ['1', '2'],
      // toolbar: ['bold italic underline forecolor backcolor', 'alignleft alignright aligncenter alignjustify', 'formatselect fontselect fontsizeselect image imagetools'],
      content: ''
    };
  },
};
</script>

<style></style>
